<script>
	import {
		cancelOrders,
		getLogistics,
		getOrderDetails,
		getUserOrderList,
		checkBilling,
		refundShipTicket,
		QueryRefundFee,
	} from '@/api/mall.js';
	import {
		getInvoiceInfoList,
		getChangeTicketFee,
		getChangeTicketStatus,
		againPay,
		getChangeTicketInfo,
		queryFefundFee,
		refundTicket,
		invoiceTicketList,
		invoiceOrRedRush
	} from '@/api/ws.js';
	import {
		orderStateExp
	} from '@/utils/base.js';
	import UQRCode from "uqrcodejs"
	import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";
	import CancelPopup from '../components/cancel-popup.vue';

	export default {
		name: "details",
		components: {
			HzSafeArea,
			CancelPopup
		},
		data() {
			return {
				orderId: null,
				orderDetail: null,
				orderListData: null, // 存储getUserOrderList接口返回的数据
				// 可以执行的操作状态
				canCancel: false,
				canPay: false,
				canConfirm: false,
				canRefund: false,
				canEvaluate: false,
				canInvoice: false, // 控制是否可以开票
				isLoading: false,
				isPayPoint: false, // 是否积分支付
				// 订单状态
				orderStatus: 0,
				// 是否正在执行取消/退款操作
				isShowOnClick: false,
				// 发票状态
				invoiceStatus: -1, // -1:未申请 0:待处理 1:已处理 2:处理失败
				invoiceStatusText: '',
				// 发票信息
				invoiceInfo: null,
				//船票信息
				sInvoiceInfo: null,
				//船票改签状态
				rebookStatus: null,
				rebookOrderId: null,
				rebookTicketInfo: null,
				// 新增：退票确认弹窗数据
				refundConfirmData: null,
				allShipTicketList: [],
				showInvoicing: false,
				msgList: [],
				isPackage:false,
			}
		},
		computed: {
			statusTitle() {
				const data = orderStateExp(this.orderStatus, this.orderListData?.ProductType);
				return data.stateTip;
			},
			showActions() {
				return this.canCancel || this.canPay || this.canEvaluate || this.showInvoicing;
			},
			// 获取商家信息
			businessInfo() {
				return this.orderDetail && this.orderDetail.BusinessModel ? this.orderDetail.BusinessModel : null;
			},
			// 获取产品列表
			productList() {
				return this.orderDetail && this.orderDetail.ProductOrdersInfoList ? this.orderDetail
					.ProductOrdersInfoList : [];
			},
			// 获取用户列表
			personList() {
				return this.orderDetail && this.orderDetail.ProductOrdersPersonsList ? this.orderDetail
					.ProductOrdersPersonsList : [];
			},
			// 获取订单状态列表
			statusList() {
				if (!this.orderDetail || !this.orderDetail.ProductOrdersStatusList || this.orderDetail
					.ProductOrdersStatusList.length === 0) {
					return [];
				}
				// 只返回最后一项，即最新的状态
				const statusList = this.orderDetail.ProductOrdersStatusList;
				return [statusList[statusList.length - 1]];
			}
		},
		watch: {
			'$i18n.locale'() {
				this.updateNavigationBarTitle();
				this.updateInvoiceStatusText();
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				// 先获取orderListData，再获取orderDetail
				this.getOrderListData().then(() => {
					this.getOrderDetail();
					// 获取开票状态
					this.checkInvoiceStatus();
				});
			}
			if(options.isPackage){
				this.isPackage = true
			}

			this.updateNavigationBarTitle();
		},
		methods: {
			orderStateExp,
			encryption(no) {
				let newNo = no;
				if (typeof no === 'string' && no.length > 8) {
					const prefix = no.slice(0, 4);
					const suffix = no.slice(-4);
					newNo = prefix + '********' + suffix;
				}
				return newNo;
			},
			async rebilling(item) {
				try {
					if (this.isLoading) {
						return;
					}
					uni.showLoading({
						title: '加载中'
					});
					this.isLoading = true
					let param = {
						invoiceType: 2,
						ghfmc: item.ghfmc,
						ghfnsrsbh: item.ghfnsrsbh,
						orderNo: item.orderNo,
						tickets: item.invoiceDetailList
					}
					let res = await invoiceOrRedRush(param)
					this.isLoading = false
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: '换开发票成功',
							icon: 'success',
							duration: 2000
						});
						this.getInvoiceData();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (err) {
					this.isLoading = false;
					uni.hideLoading();
					console.log("err =>", err.message);
					uni.showToast({
						title: err.message || '换开发票失败',
						icon: 'none',
						duration: 2000
					});
				}

			},
			openMsgPopup() {
				this.$refs.msgPopup.open();
			},
			closeMsgPopup() {
				this.$refs.msgPopup.close();
			},

			openRefundTicket() {
				this.$refs.refundTicket.open();
			},
			closeRefundTicket() {
				this.$refs.refundTicket.close();
			},
			async rebookAction() {
				try {
					let param = {
						"payMethod": "MP",
						"payPlatform": "WECHAT",
						"orderId": this.rebookOrderId,
					}
					let res = await againPay(param)
					console.log("再次支付 res=>", res);
					if (res.code == 200) {
						this.wxPay(res.result)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: "操作未成功",
						icon: 'none'
					});
				}
			},
			wxPay(paymentParams) {
				let _this = this;
				// 调用微信支付
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: paymentParams.timeStamp,
					nonceStr: paymentParams.nonceStr,
					package: paymentParams.packageValue,
					signType: paymentParams.signType,
					paySign: paymentParams.paySign,
					success: () => {
						console.log("支付成功");

						uni.showLoading({
							title: '正在出票...'
						});
						setTimeout(() => {
							uni.hideLoading();
							uni.redirectTo({
								url: `/mall_subpages/order/details?id=${_this.orderId}`
							})
						}, 3000)
					},
					fail: (err) => {
						_this.isLoading = false;
						uni.hideLoading();
						console.log('支付失败:', JSON.stringify(err));
						uni.showToast({
							title: _this.$t('payment.cancelled'),
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 更新导航栏标题
			updateNavigationBarTitle() {
				uni.setNavigationBarTitle({
					title: this.$t('orderDetail.title')
				});
			},

			// 更新发票状态文本
			updateInvoiceStatusText() {
				switch (this.invoiceStatus) {
					case -1: // 未申请
						this.invoiceStatusText = this.$t('orderDetail.actions.applyInvoice') || '申请开票';
						break;
					case 0: // 开票中
						this.invoiceStatusText = this.$t('orderDetail.actions.processing') || '开票中';
						break;
					case 1: // 已开票
						this.invoiceStatusText = this.$t('orderDetail.actions.invoiced') || '已开票';
						break;
					case 2: // 开票失败
						this.invoiceStatusText = this.$t('orderDetail.actions.invoiceFailed') || '开票失败';
						break;
					default:
						this.invoiceStatusText = this.$t('orderDetail.actions.applyInvoice') || '申请开票';
				}
			},
			// 获取发票信息
			async getInvoiceData() {
				try {
					let param = {
						pageNo: 1,
						pageSize: 99,
						orderNo: this.orderDetail.ANO
					}
					const res = await getInvoiceInfoList(param)
					console.log("发票信息 res=>", res);
					if (res.code == 200 && res.result && res.result.records && res.result
						.records.length > 0) {
						this.sInvoiceInfo = res.result.records
					} else {
						this.sInvoiceInfo = [];
					}
				} catch (e) {
					this.sInvoiceInfo = [];
					console.error('获取发票信息失败', e);

				}
			},
			// 获取发票信息
			async getInvoiceTicketList() {

				try {
					let param = []
					this.allShipTicketList.map(v => {
						if (v.isRebook) {
							param.push({
								barCode: v.barCode,
								certNo: v.passengerCertNo.slice(-6)
							})
						} else {
							param.push({
								barCode: v.BarCode,
								certNo: v.PassengerCertNo.slice(-6)
							})
						}
					})
					// console.log("allShipTicketList =>",this.allShipTicketList);
					// console.log("param =>",param);
					const res = await invoiceTicketList(param)

					console.log("获取开票数据 res=>", res);

					if (res.code == 200 && res.result && res.result.length > 0) {
						let flag = false;
						let msgList = [];
						let ticketGroups = {};
						res.result.forEach(v => {
							if (v.invoiceStatus == 'Y') {
								flag = true;
							} else {
								// 将orderNO按invoiceRemarks分组
								if (!ticketGroups[v.invoiceRemarks]) {
									ticketGroups[v.invoiceRemarks] = [];
								}
								ticketGroups[v.invoiceRemarks].push(v.orderNO);
							}
						});
						// 处理分组后的结果生成msgList
						for (let remarks in ticketGroups) {
							// 改成用orderNO不用ticketNO
							const ticketNos = ticketGroups[remarks].join('/');
							msgList.push(`订单号 ${ticketNos}：${remarks}`);
						}
						if (flag) {
							uni.setStorageSync('invoiceTicketList', res.result)
							this.goInvoice();
						} else {
							console.log("msgList =>", msgList);
							this.msgList = msgList
							this.openMsgPopup()
						}
					}
				} catch (e) {
					console.error('获取开票数据失败', e);
					uni.showToast({
						title: e.message ||  "获取可开票数据失败",
						icon: 'none'
					});
				}
			},
			// 获取所有船票列表
			getAllShipTicketList(isRebook) {
				let flag = false;
				let list = []
				if (this.orderDetail.ProductOrdersInfoList && this.orderDetail.ProductOrdersInfoList.length > 0) {
					this.orderDetail.ProductOrdersInfoList.map(oVal => {
						if (oVal.ShipTicketList && oVal.ShipTicketList.length > 0) {
							oVal.ShipTicketList.map(val => {
								val.isRebook = false;
								list.push(val)
								if (val.TicketStatus == '05') {
									flag = true;
								}
							})
						}
					})
				}
				if (isRebook && this.rebookTicketInfo && this.rebookTicketInfo.length > 0) {
					this.rebookTicketInfo.map(val => {
						val.isRebook = true;
						list.push(val)
						if (val.ticketStatus == '05') {
							flag = true;
						}
					})
				}
				this.showInvoicing = flag;
				this.allShipTicketList = list;
				console.log("allShipTicketList =>", this.allShipTicketList)
			},
			// 获取订单详情
			async getOrderDetail() {
				if (this.isLoading) return;

				try {
					this.isLoading = true;
					uni.showLoading({
						title: this.$t('orderDetail.loading')
					});

					// 调用获取订单详情API
					const {
						Data
					} = await getOrderDetails({
						OrdersOnLineId: this.orderId
					});

					if (Data) {
						this.orderDetail = Data;
						// 积分支付
						if (Data.SalePointTotal) this.isPayPoint = true;
						console.log('订单详情数据:', this.orderDetail);

						if (Data.BusinessModel && Data.BusinessModel.Id === 35) this.getInvoiceData();

						// 处理订单状态
						this.processOrderStatus();

						// 设置可执行的操作
						this.setAvailableActions();

						// 在订单详情加载完成后，检查是否需要生成二维码
						this.$nextTick(() => {
							// 只有当订单状态为已支付待使用(15)时才生成二维码
							// 且ProductType不等于2
							if (this.orderStatus === 15) {
								// 获取产品信息
								const productInfo = this.getProductInfo();
								// 检查ProductType，如果是2则不生成二维码
								if (!productInfo || productInfo.ProductType !== 2) {
									setTimeout(() => {
										this.generateQRCode();
									}, 300);
								}
							}
							setTimeout(() => {
								let flag = this.isShipTicketOrder();
								if (flag) {
									this.changeTicketStatus();
								}
							}, 300);
						});
					} else {
						uni.showToast({
							title: this.$t('orderDetail.messages.getDetailFailed'),
							icon: 'none'
						});
					}

					this.isLoading = false;
					uni.hideLoading();
				} catch (e) {
					console.error('获取订单详情失败', e);
					this.isLoading = false;
					uni.hideLoading();
					uni.showToast({
						title: this.$t('orderDetail.messages.getOrderInfoFailed'),
						icon: 'none'
					});
				}
			},
			async changeTicketStatus() {
				try {
					let param = {
						oldOrderId: this.orderId
					}
					let res = await getChangeTicketStatus(param)
					/* 
					 COMPLETED("COMPLETED", "已改签"),
					 PENDING_PAYMENT("PENDING_PAYMENT", "未支付"),
					 NOT_CHANGE("NOT_CHANGE", "未改签")
					 */
					if (res.code == 200) {
						// this.rebookStatus = res.result.status
						// this.rebookOrderId = res.result.orderId
						let orderIds = [];
						let orderList = [];
						res.result.map(v => {
							if (v.status == 'PENDING_PAYMENT') {
								this.rebookStatus = v.status;
								this.rebookOrderId = v.id;
							} else if (v.status == 'COMPLETED') {
								orderIds.push(v.orderId);
								orderList.push(v)
							}
						})
						if (orderIds.length > 0) {
							this.getRebookData(orderIds, orderList);
						} else {
							this.getAllShipTicketList(false)
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'success',
							duration: 1500
						});
					}
				} catch (e) {
					//TODO handle the exception
					console.log("changeTicketStatus err=>", e);
				}
			},
			async getRebookData(ids, orderList) {
				try {
					let param = {
						"orderIds": ids
					}
					let res = await getChangeTicketInfo(param)
					console.log("改签后的船票信息 res=>", res);
					if (res.code == 200) {
						if (orderList.length > 0 && res.result.length > 0) {
							orderList.map(v => {
								res.result.map(val => {
									if (val.orderNo == v.newOrderId) {
										val.orderId = v.orderId;
										val.orderPassword = v.orderPassword;
									}
								})
							})
						}
						this.rebookTicketInfo = res.result;
						// console.log("rebookTicketInfo =>",this.rebookTicketInfo);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'success',
							duration: 1500
						});
					}
					this.getAllShipTicketList(true)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: '获取改签后的船票信息失败',
						icon: 'success',
						duration: 1500
					});
				}
			},


			// 处理订单状态
			processOrderStatus() {
				// 首先检查orderListData是否存在，并优先使用它的Type字段
				if (this.orderListData && this.orderListData.Type !== undefined) {
					this.orderStatus = this.orderListData.Type;
					console.log("从orderListData获取订单状态", this.orderStatus);
					return;
				}

				// 如果statusList为空，使用订单的Type字段
				if (!this.statusList || this.statusList.length === 0) {
					this.orderStatus = this.orderDetail.Type || 0;
					return;
				}

				// 直接使用statusList的第一项(也是唯一的一项)的Type值
				this.orderStatus = this.statusList[0].Type;
				console.log("订单状态", this.orderStatus);

			},

			// 设置可执行的操作
			setAvailableActions() {

				// 重置操作状态
				this.canCancel = false;
				this.canPay = false;
				this.canConfirm = false;
				this.canRefund = false;
				this.canEvaluate = false;
				this.canInvoice = false; // 重置开票状态

				// 依据order.vue中的逻辑判断订单状态
				if (!this.orderDetail) return;

				switch (this.orderStatus) {
					case 17: // 待付款
						this.canCancel = true;
						this.canPay = true;
						break;
					case 15: // 已支付待使用
						this.canRefund = true;
						break;
					case 1: // 已发货
						this.canConfirm = true;
						break;
					case 2: // 已完成
						this.canEvaluate = true;
						// 只有未申请开票或申请失败状态才可以申请开票
						if (this.invoiceStatus === -1 || this.invoiceStatus === 2) {
							this.canInvoice = true;
						}
						break;
					case 6: // 已收货
						this.canEvaluate = true;
						// 只有未申请开票或申请失败状态才可以申请开票
						if (this.invoiceStatus === -1 || this.invoiceStatus === 2) {
							this.canInvoice = true;
						}
						break;
					case 18: // 申请退款，
						this.canRefund = true;
						break;
				}

				// 特殊处理：根据订单内部信息进一步判断可执行操作
				if (this.productList && this.productList.length > 0) {
					const productInfo = this.productList[0];

					// 线上产品（门票、酒店等），对应order.vue中的IsOnline=1的逻辑
					if (productInfo.IsOnline === 1 && this.orderStatus === 15) {
						this.canRefund = true;
						// 只有未申请开票或申请失败状态才可以申请开票
						if (this.invoiceStatus === -1 || this.invoiceStatus === 2) {
							this.canInvoice = true;
						}
					}

					// 线下产品（实物商品）
					if (productInfo.IsOnline === 0 && this.orderStatus === 15) {
						this.canConfirm = true;
						// 只有未申请开票或申请失败状态才可以申请开票
						if (this.invoiceStatus === -1 || this.invoiceStatus === 2) {
							this.canInvoice = true;
						}
					}
				}
			},

			// 获取预定时间范围
			getBookingTimeRange() {
				const productInfo = this.getProductInfo();
				if (!productInfo) return this.$t('orderDetail.labels.unknown');
				// 判断是否为酒店类型（ProductType === 13）
				if (productInfo.ProductType === 13 && productInfo.CheckInDate && productInfo.CheckOutDate) {
					// 只保留年月日
					const inDate = productInfo.CheckInDate.split(' ')[0];
					const outDate = productInfo.CheckOutDate.split(' ')[0];
					return `${inDate} ~ ${outDate}`;
				}
				if (productInfo.CheckInDate && productInfo.CheckOutDate) {
					return `${productInfo.CheckInDate} ~ ${productInfo.CheckOutDate}`;
				}
				return this.$t('orderDetail.labels.unknown');
			},

			// 获取备注信息
			getRemark() {
				const productInfo = this.getProductInfo();
				if (!productInfo) return this.$t('orderDetail.labels.none');

				return productInfo.OrderRemak || this.$t('orderDetail.labels.none');
			},

			// 复制订单号
			copyOrderNo(text) {
				if (!text) return;

				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: this.$t('orderDetail.messages.copySuccess'),
							icon: 'success',
							duration: 1500
						});
					}
				});
			},

			// 复制发票下载地址
			copyFPNo(text) {
				if (!text) return;

				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '已复制发票链接，请到浏览器上打开，即可下载发票',
							icon: 'none',
							duration: 3000
						});
					}
				});
			},


			// 获取订单列表数据（用于取消订单操作）
			async getOrderListData() {
				try {
					const {
						Data
					} = await getUserOrderList({
						OrderId: this.orderId
					});
					console.log('订单列表数据:', Data);

					if (Array.isArray(Data) && Data.length > 0) {
						this.orderListData = Data[0];
					} else {
						this.orderListData = Data;
					}

					// 在数据加载完成后，不直接调用生成二维码
					// 现在由getOrderDetail方法中处理生成二维码的逻辑
				} catch (error) {
					console.error('获取订单列表数据失败:', error);
				}
			},

			// 取消订单
			cancelOrder() {
				if (!this.orderListData) {
					uni.showToast({
						title: this.$t('orderDetail.messages.dataLoading'),
						icon: 'none'
					});
					return;
				}

				// 显示取消订单原因选择弹窗
				this.$refs.refcancel.show({
					type: 1, // 1为取消订单
					item: this.orderListData,
					goodsItem: this.orderListData.OrdersOnlineInfoViewList
				});
			},

			// 处理取消订单逻辑
			async handleCancelOrder(title) {
				if (this.isShowOnClick) return;
				this.isShowOnClick = true;

				uni.showLoading({
					title: this.$t('orders.orderList.pleaseWait')
				});

				try {
					await cancelOrders({
						"OrdersOnLineId": this.orderListData.OrdersOnLineId,
						"OrdersOnLineType": this.orderListData.OrdersOnLineType,
						"Remark": title
					});

					uni.showToast({
						title: this.$t('orderDetail.messages.cancelSuccess'),
						icon: 'success'
					});
					this.$refs.refcancel.hide()
					// 刷新订单数据
					setTimeout(() => {
						this.getOrderDetail();
						this.getOrderListData();
					}, 1500);

					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
					uni.showToast({
						title: e.Msg || this.$t('orderDetail.messages.cancelFailed'),
						icon: 'none',
						duration: 2000
					});
					console.error('取消订单失败:', e);
				} finally {
					this.isShowOnClick = false;
				}
			},

			// 处理弹窗确认按钮
			handleOk(e) {
				if (e.type === 1) {
					// 取消订单
					this.handleCancelOrder(e.title);
				} else if (e.type === 2) {
					// 退款申请 - 暂不实现
					console.log('申请退款:', e);
				}
			},

			// 支付订单
			payOrder() {
				uni.navigateTo({
					url: "/mall_subpages/goods/payment?id=" + this.orderId + "&delta=1"
				})
			},

			// 确认收货
			confirmReceipt() {
				uni.showModal({
					title: this.$t('common.tips'),
					content: '确认已收到商品？',
					success: (res) => {
						if (res.confirm) {
							// 调用确认收货API
							uni.showToast({
								title: this.$t('orderDetail.messages.receiptInDevelopment'),
								icon: 'none'
							});
						}
					}
				});
			},

			// 申请退款
			applyRefund() {
				// 直接弹出退款弹窗，传递订单数据
				this.$refs.refcancel.show({
					type: 2, // 2为申请退款
					item: this.orderListData,
					goodsItem: this.orderListData.OrdersOnlineInfoViewList
				});
			},

			// 获取显示价格
			getProductPrice(item, unitKey) {
				const point = this.$t('orders.actualPaymentPoint');
				const unit = this.$t('orders.actualPaymentUnit');
				if (item.SalePointTotal) return `${item.SalePointTotal} ${point}`;
				return `${unit} ${item[unitKey] || 0}`;
			},

			// 获取显示数量
			getProductQuantity(item) {
				return item.Num || 1;
			},

			// 获取用户信息
			getPersonInfo() {
				if (!this.personList || this.personList.length === 0) return null;
				return this.personList[0];
			},

			// 调用商家电话
			callShop() {
				if (!this.businessInfo || !this.businessInfo.Mobile) return;

				uni.makePhoneCall({
					phoneNumber: this.businessInfo.Mobile,
					fail: () => {
						uni.showToast({
							title: this.$t('orderDetail.messages.callFailed'),
							icon: 'none'
						});
					}
				});
			},

			// 去评价
			navToEvaluation() {
				if (!this.orderDetail) return;

				uni.navigateTo({
					url: `/mall_subpages/evaluation/evaluation?id=${this.orderDetail.Id}`
				});
			},

			// 获取发票状态
			async checkInvoiceStatus() {
				try {
					const {
						Data
					} = await checkBilling({
						OrderId: this.orderListData.OrdersANO
					});

					if (Data === null) {
						// 未申请过开票
						this.invoiceStatus = -1;
						this.invoiceInfo = null;
					} else {
						// 有开票信息
						this.invoiceInfo = Data;
						this.invoiceStatus = Data.Status; // 0=开票中，1=已开票，2=开票失败
					}

					this.updateInvoiceStatusText();

					// 更新可执行操作状态
					this.setAvailableActions();

				} catch (error) {
					console.error('获取发票状态失败:', error);
					// 默认设置为未申请状态
					this.invoiceStatus = -1;
					this.invoiceInfo = null;
					this.updateInvoiceStatusText();
				}
			},
			goInvoice() {
				if (this.isShipTicketOrder()) {
					uni.navigateTo({
						url: `/mall_subpages/order/invoice?id=${this.orderDetail.ANO}&isShip=true`
					});
				} else {
					uni.navigateTo({
						url: `/mall_subpages/order/invoice?id=${this.orderListData.OrdersANO}`
					});
				}

			},

			// 申请开票
			applyInvoice() {
				// 根据发票状态执行不同操作
				switch (this.invoiceStatus) {
					case -1: // 未申请
					case 2: // 处理失败
						// 跳转到开票申请页面
						this.goInvoice()
						break;
					case 0: // 待处理
						uni.showToast({
							title: this.$t('orderDetail.messages.invoiceProcessing'),
							icon: 'none'
						});
						break;
					case 1: // 已处理
						uni.showToast({
							title: this.$t('orderDetail.messages.invoiceCompleted'),
							icon: 'none'
						});
						break;
				}
			},

			// 格式化规格字符串
			formatSpecStr(specStr) {
				if (!specStr) return '';
				return specStr.split('|').join(' ');
			},

			// 格式化日期，只保留年月日
			formatDateOnly(dateStr) {
				console.log(dateStr)
				if (!dateStr) return '';
				// 如果日期字符串包含空格，则分割并取第一部分（日期部分）
				if (dateStr.includes(' ')) {
					return dateStr.split(' ')[0];
				}
				return dateStr;
			},

			// 获取产品信息(第一个产品) - 保持原有逻辑，主要用于获取单个产品的基本信息
			getProductInfo() {
				if (!this.orderListData || !this.orderListData.OrdersOnlineInfoViewList || this.orderListData
					.OrdersOnlineInfoViewList.length === 0) return null;
				return this.orderListData.OrdersOnlineInfoViewList[0];
			},

			// 生成二维码
			generateQRCode() {
				// 检查订单状态，只有状态为15(已支付待使用)时才生成二维码
				if (this.orderStatus !== 15) {
					console.log('当前订单状态不需要生成二维码:', this.orderStatus);
					return;
				}

				// 检查产品类型，如果是ProductType=2则不生成二维码
				const productInfo = this.getProductInfo();
				if (productInfo && productInfo.ProductType === 2) {
					console.log('实物商品(ProductType=2)不需要生成二维码');
					return;
				}

				const content = this.getQRCodeContent();
				console.log('二维码内容:', content);

				if (!content) {
					console.log('没有获取到二维码内容');
					return;
				}

				try {
					// 确保canvas元素已经渲染
					setTimeout(() => {
						const qr = new UQRCode();
						qr.data = content;
						qr.size = 150;
						qr.make();
						qr.margin = 15;

						qr.canvasContext = uni.createCanvasContext('qrcode', this);
						qr.drawCanvas();
					}, 300);
				} catch (e) {
					console.error('生成二维码失败', e);
				}
			},

			// 获取二维码内容
			getQRCodeContent() {
				const productInfo = this.getProductInfo();
				console.log(productInfo)
				if (!productInfo || !productInfo.Code) return '';
				return productInfo.Code
			},

			// 导航到商品详情
			navToProductDetail(e) {
				if (!e.ProductId) return;
				if (e.ProductModel?.BusinessId === 34) {
					uni.navigateTo({
						url: `/ticket_subpages/traffic/list`
					});
				} else if (e.ProductModel?.BusinessId === 35) {
					uni.navigateTo({
						url: `/ticket_subpages/index/query`
					});
				} else {
					uni.navigateTo({
						url: `/mall_subpages/goods/index?id=${e.ProductId}&type=${this.businessInfo.BusinessClassify}`
					});
				}

			},

			// 判断是否为船票订单
			isShipTicketOrder() {
				return this.businessInfo && this.businessInfo.Id === 35;
			},

			// 将对象首字母转大写
			capitalizeKeys(obj) {
				if (typeof obj !== 'object' || obj === null) {
					return obj;
				}
				if (Array.isArray(obj)) {
					return obj.map(item => this.capitalizeKeys(item));
				}
				const newObj = {};
				for (const key in obj) {
					if (obj.hasOwnProperty(key)) {
						const newKey = key.charAt(0).toUpperCase() + key.slice(1);
						newObj[newKey] = this.capitalizeKeys(obj[key]);
					}
				}
				return newObj;
			},

			// 获取未付款的船票信息
			getType17ShipInfo() {
				if (!this.isShipTicketOrder()) return null;
				if (![16, 17].includes(this.orderListData.Type)) return null;
				if (!this.productList || !this.productList.length) return null;

				const allTicketList = [];
				let orderNo = '';
				let shipOrderNo = '';
				let contactName = '';
				let contactMobile = '';
				let orderNoMap = new Map();

				this.productList.forEach(productInfo => {
					const ShipTicketInfo = JSON.parse(productInfo.ShipTicketInfo);
					if (ShipTicketInfo) {
						ShipTicketInfo.detailList.forEach(ticket => {
							const newTicket = this.capitalizeKeys(ticket);
							ticket.orderInfoId = productInfo.Id;
							allTicketList.push(newTicket);
							orderNoMap.set(newTicket.Id, newTicket.OrderNo);
						})
						if (!orderNo && ShipTicketInfo.detailList[0]) {
							const firstTicket = ShipTicketInfo.detailList[0];
							orderNo = firstTicket.orderNo;
							shipOrderNo = productInfo.ShipOrderNo;
							contactName = firstTicket.passengerName;
							contactMobile = firstTicket.passengerMobile;
						}
					}
				})

				if (!allTicketList.length) return null;
				const firstTicket = allTicketList[0];

				return {
					orderNo: orderNo,
					shipOrderNo: shipOrderNo,
					ticketCount: allTicketList.length,
					orderStatusName: this.getOrderStatusName(firstTicket.TicketStatus),
					contactName: contactName,
					contactMobile: contactMobile,
					orderNoMap: orderNoMap, // 添加票ID与OrderNo的映射
					detailList: allTicketList.map(ticket => ({
						ticketId: ticket.Id,
						passengerName: ticket.PassengerName,
						ticketTypeName: ticket.TicketTypeName,
						startPortName: ticket.StartPortName,
						departTime: ticket.DepartTime,
						arrivePortName: ticket.ArrivePortName,
						arriveTime: ticket.ArriveTime,
						shipName: ticket.ShipName,
						classNo: ticket.ClassNo,
						classDate: ticket.ClassDate,
						cabinName: ticket.CabinName,
						seatNo: ticket.SeatNo,
						ticketPrice: parseFloat(ticket.TicketPrice),
						barCode: ticket.BarCode,
						passengerCertNo: ticket.PassengerCertNo,
						ticketStatus: ticket.TicketStatus,
						orderNo: ticket.OrderNo, // 为每张票保存其对应的OrderNo
						orderInfoId: ticket.orderInfoId,
					}))
				}
			},

			// 获取船票信息
			getShipTicketInfo() {
				if (!this.isShipTicketOrder() || !this.productList || this.productList.length === 0) {
					return null;
				}

				// 处理多个ProductOrdersInfoList，收集所有船票信息
				let allTicketList = [];
				let orderNo = '';
				let shipOrderNo = '';
				let contactName = '';
				let contactMobile = '';
				let orderNoMap = new Map(); // 存储票ID与对应OrderNo的映射

				this.productList.forEach(productInfo => {
					if (productInfo.ShipTicketList && Array.isArray(productInfo.ShipTicketList) && productInfo
						.ShipTicketList.length > 0) {
						// 合并所有票务信息，并建立票ID与OrderNo的映射
						productInfo.ShipTicketList.forEach(ticket => {
							ticket.orderInfoId = productInfo.Id;
							ticket.orderPassword = productInfo.ShipOrderInfo ? JSON.parse(productInfo
								.ShipOrderInfo).orderPassword : '';
							allTicketList.push(ticket);
							// 建立票ID与OrderNo的映射关系
							orderNoMap.set(ticket.Id, ticket.OrderNo);
						});

						// 获取基本信息（以第一个产品的信息为准）
						if (!orderNo && productInfo.ShipTicketList[0]) {
							const firstTicket = productInfo.ShipTicketList[0];
							orderNo = firstTicket.OrderNo;
							shipOrderNo = productInfo.ShipOrderNo;
							contactName = firstTicket.PassengerName;
							contactMobile = firstTicket.PassengerMobile;
						}
					}
				});

				if (allTicketList.length === 0) {
					return null;
				}

				const firstTicket = allTicketList[0];

				return {
					orderNo: orderNo,
					shipOrderNo: shipOrderNo,
					ticketCount: allTicketList.length,
					orderStatusName: this.getOrderStatusName(firstTicket.TicketStatus),
					contactName: contactName,
					contactMobile: contactMobile,
					orderNoMap: orderNoMap, // 添加票ID与OrderNo的映射
					detailList: allTicketList.map(ticket => ({
						ticketId: ticket.Id,
						passengerName: ticket.PassengerName,
						ticketTypeName: ticket.TicketTypeName,
						startPortName: ticket.StartPortName,
						departTime: ticket.DepartTime,
						arrivePortName: ticket.ArrivePortName,
						arriveTime: ticket.ArriveTime,
						shipName: ticket.ShipName,
						classNo: ticket.ClassNo,
						classDate: ticket.ClassDate,
						cabinName: ticket.CabinName,
						seatNo: ticket.SeatNo,
						ticketPrice: parseFloat(ticket.TicketPrice),
						barCode: ticket.BarCode,
						passengerCertNo: ticket.PassengerCertNo,
						ticketStatus: ticket.TicketStatus,
						orderNo: ticket.OrderNo, // 为每张票保存其对应的OrderNo
						orderInfoId: ticket.orderInfoId,
						orderPassword: ticket.orderPassword
					}))
				};
			},

			// 获取订单状态名称（根据票务状态转换）
			getOrderStatusName(ticketStatus) {
				const statusMap = {
					'00': '已锁位',
					'01': '正常售出',
					'02': '已取纸票',
					'03': '已改签',
					'04': '已退票',
					'05': '已检票',
					'06': '已销票'
				};
				return statusMap[ticketStatus] || '未知状态';
			},

			// 获取发票图片数组
			getInvoiceImages() {
				if (!this.invoiceInfo || !this.invoiceInfo.InvoiceImages) {
					return [];
				}
				// 按逗号分割图片URL
				return this.invoiceInfo.InvoiceImages.split(',').filter(url => url.trim());
			},

			// 预览发票图片
			previewImage(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls,
					fail: (err) => {
						console.error('预览图片失败:', err);
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			},
			//改签
			async rebook(ticket) {
				console.log("票数据 ticket=>", ticket);

				try {
					let param = {
						orderNo: ticket.orderNo,
						ticketID: ticket.ticketId
					}
					uni.showLoading({
						title: '加载中'
					});
					let res = await getChangeTicketFee(param);
					console.log("是否允许改签 res=>", res);
					uni.hideLoading();
					if (res.code == 200) {
						if (res.result && res.result[0].canChange == 1) {
							let data = {
								...ticket,
								orderId: this.orderId
							}
							uni.setStorageSync('rebookTicket', data)
							uni.navigateTo({
								url: '/ticket_subpages/index/rebook'
							})
						} else {
							uni.showToast({
								title: res.result[0].remarks,
								icon: 'none'
							});
						}

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}

				} catch (e) {
					uni.hideLoading();
					//TODO handle the exception
					uni.showToast({
						title: '获取改签信息失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			// 改签后的票退票确认
			async confirmRebookRefundTicket(ticket) {
				try {
					uni.showLoading({
						title: '查询退票信息...'
					});

					const response = await queryFefundFee({
						orderNo: ticket.orderNo
					});
					console.log("改签后的退票信息 response=>", response);

					uni.hideLoading();
					if (response.code == 200 && response.result) {
						let refundData = response.result;
						refundData.orderId = ticket.orderId
						// 查找当前票的退票信息
						const currentTicketRefund = refundData.detailList.find(
							item => item.ticketID == ticket.id
						);
						console.log("currentTicketRefund =>", currentTicketRefund);
						if (currentTicketRefund) {
							// 构建弹窗数据
							this.refundConfirmData = {
								ticket,
								currentTicketRefund,
								refundData
							};
							this.$refs.refundTicket.open();
						} else {
							uni.showToast({
								title: '未找到该票的退票信息',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: response.Msg || '查询退票信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('查询退票费用失败:', error);
					uni.showToast({
						title: '查询退票信息失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			// 退票确认
			async confirmRefundTicket(ticket) {
				try {
					uni.showLoading({
						title: '查询退票信息...'
					});

					// 获取该票所属的ShipOrderNo
					const queryOrderNo = this.getShipOrderNoForTicket(ticket);

					if (!queryOrderNo) {
						uni.hideLoading();
						uni.showToast({
							title: '未找到船票订单号',
							icon: 'none'
						});
						return;
					}

					const response = await QueryRefundFee({
						orderNo: queryOrderNo
					});

					uni.hideLoading();

					if (response.Code === '200' && response.Data) {
						const refundData = response.Data;

						// 查找当前票的退票信息
						const currentTicketRefund = refundData.detailList.find(
							item => item.ticketID === ticket.ticketId
						);

						if (currentTicketRefund) {
							const ticketPrice = parseFloat(currentTicketRefund.ticketPrice);
							const refundAmount = parseFloat(currentTicketRefund.refundAmount);
							const refundRateAmount = parseFloat(currentTicketRefund.refundRateAmount);
							const remarks = currentTicketRefund.remarks || '';
							let refundData = response.result;
							// 构建确认消息
							// let content = `乘客：${ticket.passengerName}\n`;
							// content += `航班：${ticket.classNo}\n`;
							// content += `票价：¥${ticketPrice.toFixed(2)}\n`;
							// content += `手续费：¥${refundRateAmount.toFixed(2)}\n`;
							// content += `退款金额：¥${refundAmount.toFixed(2)}\n`;
							// if (remarks) {
							// 	content += `说明：${remarks}\n`;
							// }
							// content += `退票成功后，退款金额将在1-5个工作日内退回\n`;
							// content += `\n确定要退票吗？`;

							// uni.showModal({
							// 	title: '退票确认',
							// 	content: content,
							// 	success: (res) => {
							// 		if (res.confirm) {
							// 			this.refundTicket(ticket);
							// 		}
							// 	}
							// });

							// 构建弹窗数据
							this.refundConfirmData = {
								ticket,
								currentTicketRefund,
								refundData,
								noRebook: true
							};
							this.$refs.refundTicket.open();
						} else {
							uni.showToast({
								title: '未找到该票的退票信息',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: response.Msg || '查询退票信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('查询退票费用失败:', error);
					uni.showToast({
						title: '查询退票信息失败，请稍后重试',
						icon: 'none'
					});
				}
			},

			// 退票操作
			async rebookRefundTicket(refundData) {
				console.log("refundData =>", refundData);
				this.closeRefundTicket()
				try {
					uni.showLoading({
						title: '退票中...'
					});


					let refundTickets = [];
					refundData.detailList.map(v => {
						refundTickets.push({
							ticketID: v.ticketID
						})
					})
					let param = {
						"shipOrder": {
							"orderNo": refundData.orderNo,
							"refundTickets": refundTickets
						},
						"orderId": refundData.orderId
					}
					const response = await refundTicket(param);

					uni.hideLoading();

					if (response.code == 200) {
						uni.showToast({
							title: '退票成功',
							icon: 'success'
						});

						// 刷新订单数据
						setTimeout(() => {
							this.getOrderDetail();
							this.getOrderListData();
						}, 1500);
					} else {
						uni.showToast({
							title: response.Msg || '退票失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('退票失败:', error);
					uni.showToast({
						title: '退票失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			// 退票操作
			async refundTicket(ticket) {
				this.closeRefundTicket()
				try {
					uni.showLoading({
						title: '退票中...'
					});
					console.log("ticket =>", ticket);
					const shipTicketInfo = this.getShipTicketInfo();
					// 使用票本身的OrderNo，而不是第一张票的OrderNo
					const ticketOrderNo = ticket.orderNo || shipTicketInfo.orderNoMap.get(ticket.ticketId) ||
						shipTicketInfo.orderNo;

					const response = await refundShipTicket({
						OrderNo: ticketOrderNo,
						TicketID: ticket.ticketId
					});

					uni.hideLoading();

					if (response.Code === '200') {
						uni.showToast({
							title: '退票成功',
							icon: 'success'
						});

						// 刷新订单数据
						setTimeout(() => {
							this.getOrderDetail();
							this.getOrderListData();
						}, 1500);
					} else {
						uni.showToast({
							title: response.Msg || '退票失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('退票失败:', error);
					uni.showToast({
						title: '退票失败，请稍后重试',
						icon: 'none'
					});
				}
			},

			// 判断票是否可以退票
			canRefundTicket(ticket) {
				// 只有已出票(01)状态的票才能退票
				return ticket.ticketStatus === '01';
			},

			// 获取特定票所属的ShipOrderNo
			getShipOrderNoForTicket(ticket) {
				if (!this.productList || this.productList.length === 0) {
					return null;
				}

				const ticketOrderNo = ticket.orderNo;

				// 遍历productList找到包含该票的产品
				for (let productInfo of this.productList) {
					if (productInfo.ShipTicketList && Array.isArray(productInfo.ShipTicketList)) {
						const foundTicket = productInfo.ShipTicketList.find(t => t.OrderNo === ticketOrderNo);
						if (foundTicket) {
							return productInfo.ShipOrderNo;
						}
					}
				}

				// 如果没找到，返回第一个产品的ShipOrderNo
				return this.productList[0]?.ShipOrderNo || null;
			},


		}
	}
</script>

<template>
	<view class="order-detail-container">
		<!-- 数据加载中状态 -->
		<view class="loading-container" v-if="!orderDetail">
			<view class="loading-spinner"></view>
			<text>{{$t('orderDetail.loading')}}</text>
		</view>

		<template v-else>
			<!-- 订单状态区域 -->
			<view class="status-section">
				<view class="status-wrapper">
					<view class="status-text">{{ statusTitle }}</view>
				</view>
			</view>

			<!-- 商品信息区域 - 船票订单不显示 -->
			<view class="section-card" v-if="productList && productList.length > 0 && !isShipTicketOrder()">
				<view class="section-title">
					<text>{{$t('orderDetail.sections.productInfo')}}</text>
				</view>
				<view class="product-list">
					<view class="product-item" v-for="(item, index) in productList" :key="index"
						@click="navToProductDetail(item)">
						<image class="product-image" :src="item.ProductModel.Img" mode="aspectFill"></image>
						<view class="product-info">
							<view class="product-name">{{ item.ProductModel.Name }}</view>
							<view class="product-spec" v-if="item.ProductSpecStr">{{ item.ProductSpecStr }}</view>
							<view class="product-price-row">
								<text v-if="isPackage" class="product-price isPackage">{{getProductPrice(item.ProductModel,'ShowPrice')}}</text>
								<text v-else class="product-price">{{ getProductPrice(item, 'SalePrice') }}</text>
								<text class="product-count">x{{ getProductQuantity(item) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="total-price">
					<text>{{isPackage? '套餐总价' : $t('orderDetail.labels.orderTotal')}}</text>
					<!-- <text class="price">¥{{ orderDetail.SalePriceTotal }}</text> -->
					<text class="price">{{ getProductPrice(orderDetail, 'SalePriceTotal') }}</text>
				</view>
			</view>

			<!-- 订单信息区域 -->
			<view class="section-card">
				<view class="section-title">
					<text>{{$t('orderDetail.sections.orderInfo')}}</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">{{$t('orderDetail.labels.orderNumber')}}</text>
						<view class="info-value copy-wrapper">
							<text>{{ orderDetail.ANO || $t('orderDetail.labels.unknown') }}</text>
							<text v-if="orderDetail.ANO" @click="copyOrderNo(orderDetail.ANO)"
								class="copy-icon">{{$t('orderDetail.labels.copy')}}</text>
						</view>
					</view>

					<view class="info-item">
						<text class="info-label">{{$t('orderDetail.labels.orderTime')}}</text>
						<text class="info-value">{{ orderDetail.AddTime || $t('orderDetail.labels.unknown') }}</text>
					</view>

					<!-- 添加规格信息显示 -->
					<view class="info-item" v-if="getProductInfo() && getProductInfo().OrderDate">
						<text class="info-label">{{$t('orderDetail.labels.specDate')}}</text>
						<text class="info-value">{{ formatDateOnly(getProductInfo().OrderDate) }}</text>
					</view>
					<!-- 添加规格信息显示 -->
					<view class="info-item" v-if="getProductInfo() && getProductInfo().ProductSpecStr">
						<text class="info-label">{{$t('orderDetail.labels.specInfo')}}</text>
						<text class="info-value">{{ formatSpecStr(getProductInfo().ProductSpecStr) }}</text>
					</view>

					<view class="info-item" v-if="getProductInfo() && getProductInfo().ProductType === 13">
						<text class="info-label">{{$t('orderDetail.labels.bookingTime')}}</text>
						<text class="info-value">{{ getBookingTimeRange() }}</text>
					</view>

					<view class="info-item">
						<text class="info-label">{{$t('orderDetail.labels.remark')}}</text>
						<text class="info-value">{{ getRemark() }}</text>
					</view>
				</view>
			</view>

			<!-- 未付款船票显示信息 -->
			<view v-if="getType17ShipInfo()" class="section-card">
				<view class="section-title">
					<text>船票信息</text>
				</view>
				<view class="ship-ticket-info">
					<view class="ticket-basic-info">
						<view class="info-item">
							<text class="info-label">票数</text>
							<text class="info-value">{{ getType17ShipInfo().ticketCount || 0 }}张</text>
						</view>
						<view class="info-item">
							<text class="info-label">总价</text>
							<text class="info-value price">{{ getProductPrice(orderDetail, 'SalePriceTotal') }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">联系人</text>
							<text
								class="info-value">{{ getType17ShipInfo().contactName || $t('orderDetail.labels.unknown') }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">联系电话</text>
							<text
								class="info-value">{{ getType17ShipInfo().contactMobile || $t('orderDetail.labels.unknown') }}</text>
						</view>
						<view class="info-item" v-if="rebookStatus && rebookStatus =='PENDING_PAYMENT'">
							<text class="info-label">待支付订单</text>
							<text class="info-value">
								<text class="info-action-btn" v-if="rebookStatus == 'PENDING_PAYMENT'"
									@click="rebookAction">
									去支付
								</text>
							</text>
						</view>
					</view>

					<view class="ticket-detail-list"
						v-if="getType17ShipInfo().detailList && getType17ShipInfo().detailList.length > 0">
						<view class="detail-title">乘客详情</view>

						<!-- 改签后船票信息 -->
						<view v-if="rebookTicketInfo">
							<view class="ticket-detail-item" v-for="(detail, index) in rebookTicketInfo" :key="index">
								<view class="detail-header">
									<view class="detail-header-left">
										<text class="passenger-name">{{ detail.passengerName }}</text>
										<text class="ticket-type">{{ detail.ticketTypeName }}</text>
									</view>
									<text class="ticket-price">¥{{ detail.ticketPrice }}</text>
								</view>
								<view class="detail-header">
									<text class="passenger-no">{{ encryption(detail.passengerCertNo) }}</text>
									<text class="ticket-status" :class="{
															                      'status-locked': detail.ticketStatus === '00',
															                      'status-issued': detail.ticketStatus === '01',
															                      'status-checked': detail.ticketStatus === '02',
															                      'status-changed': detail.ticketStatus === '03',
															                      'status-refunded': detail.ticketStatus === '04'
															                    }">{{ getOrderStatusName(detail.ticketStatus) }}</text>
								</view>

								<view class="route-info">
									<view class="route-section">
										<text class="port-name">{{ detail.startPortName }}</text>
										<text class="time">{{ detail.departTime }}</text>
									</view>
									<view class="route-arrow">
										<text class="ship-name">{{ detail.cabinName }} / 座位号{{ detail.seatNo }}</text>
										<view class="arrow-line"></view>
										<text class="ship-name">{{ detail.shipName }} / 航班号{{ detail.classNo }}</text>
									</view>
									<view class="route-section">
										<text class="port-name">{{ detail.arrivePortName }}</text>
										<text class="time">{{ detail.arriveTime }}</text>
									</view>
								</view>
								<view class="ticket-details">

									<view class="detail-row">
										<text class="label">订单号：</text>
										<text class="value">{{ detail.orderNo }}<text v-if="detail.orderNo"
												@click="copyOrderNo(detail.orderNo)"
												class="copy-icon">{{$t('orderDetail.labels.copy')}}</text></text>
									</view>
									<view class="detail-row" v-if="detail.orderPassword">
										<text class="label">验证码：</text>
										<text class="value">{{ detail.orderPassword }}</text>
									</view>
									<!-- <view class="detail-row">
																	<text class="label">航班号：</text>
																	<text class="value">{{ detail.classNo }}</text>
																</view> -->
									<view class="detail-row">
										<text class="label">航班日期：</text>
										<text class="value">{{ detail.classDate }}</text>
									</view>
								</view>

							</view>
						</view>

						<view class="ticket-detail-item" v-for="(detail, index) in getType17ShipInfo().detailList"
							:key="index">
							<view class="detail-header">
								<view class="detail-header-left">
									<text class="passenger-name">{{ detail.passengerName }}</text>
									<text class="ticket-type">{{ detail.ticketTypeName }}</text>
								</view>
								<text class="ticket-price">¥{{ detail.ticketPrice }}</text>
							</view>
							<view class="detail-header">
								<text class="passenger-no">{{ encryption(detail.passengerCertNo) }}</text>
								<text class="ticket-status" :class="{
							                      'status-locked': detail.ticketStatus === '00',
							                      'status-issued': detail.ticketStatus === '01',
							                      'status-checked': detail.ticketStatus === '02',
							                      'status-changed': detail.ticketStatus === '03',
							                      'status-refunded': detail.ticketStatus === '04'
							                    }">{{ getOrderStatusName(detail.ticketStatus) }}</text>
							</view>

							<view class="route-info">
								<view class="route-section">
									<text class="port-name">{{ detail.startPortName }}</text>
									<text class="time">{{ detail.departTime }}</text>
								</view>
								<view class="route-arrow">
									<text class="ship-name">{{ detail.cabinName }} / 座位号{{ detail.seatNo }}</text>
									<view class="arrow-line"></view>
									<text class="ship-name">{{ detail.shipName }} / 航班号{{ detail.classNo }}</text>
								</view>
								<view class="route-section">
									<text class="port-name">{{ detail.arrivePortName }}</text>
									<text class="time">{{ detail.arriveTime }}</text>
								</view>
							</view>

							<view class="ticket-details">

								<view class="detail-row">
									<text class="label">订单号：</text>
									<text class="value">{{ detail.orderNo }}<text v-if="detail.orderNo"
											@click="copyOrderNo(detail.orderNo)"
											class="copy-icon">{{$t('orderDetail.labels.copy')}}</text></text>
								</view>
								<view class="detail-row" v-if="detail.orderPassword">
									<text class="label">验证码：</text>
									<text class="value">{{ detail.orderPassword }}</text>
								</view>
								<!-- <view class="detail-row">
																<text class="label">航班号：</text>
																<text class="value">{{ detail.classNo }}</text>
															</view> -->
								<view class="detail-row">
									<text class="label">航班日期：</text>
									<text class="value">{{ detail.classDate }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 船票信息区域 -->
			<view class="section-card" v-if="isShipTicketOrder() && getShipTicketInfo()">
				<view class="section-title">
					<text>船票信息</text>
				</view>
				<view class="ship-ticket-info">
					<!-- 船票基本信息 -->
					<view class="ticket-basic-info">
						<!-- 		<view class="info-item">
							<text class="info-label">船票订单号</text>
							<view class="info-value copy-wrapper">
								<text>{{ getShipTicketInfo().orderNo || $t('orderDetail.labels.unknown') }}</text>
								<text v-if="getShipTicketInfo().orderNo"
									@click="copyOrderNo(getShipTicketInfo().orderNo)"
									class="copy-icon">{{$t('orderDetail.labels.copy')}}</text>
							</view>
						</view> -->
						<view class="info-item">
							<text class="info-label">票数</text>
							<text class="info-value">{{ getShipTicketInfo().ticketCount || 0 }}张</text>
						</view>
						<view class="info-item">
							<text class="info-label">总价</text>
							<text class="info-value price">{{ getProductPrice(orderDetail, 'SalePriceTotal') }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">联系人</text>
							<text
								class="info-value">{{ getShipTicketInfo().contactName || $t('orderDetail.labels.unknown') }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">联系电话</text>
							<text
								class="info-value">{{ getShipTicketInfo().contactMobile || $t('orderDetail.labels.unknown') }}</text>
						</view>
						<view class="info-item" v-if="rebookStatus && rebookStatus =='PENDING_PAYMENT'">
							<text class="info-label">待支付订单</text>
							<text class="info-value">
								<text class="info-action-btn" v-if="rebookStatus == 'PENDING_PAYMENT'"
									@click="rebookAction">
									去支付
								</text>
							</text>

						</view>

					</view>

					<!-- 船票详细信息列表 -->
					<view class="ticket-detail-list"
						v-if="getShipTicketInfo().detailList && getShipTicketInfo().detailList.length > 0">
						<view class="detail-title">乘客详情</view>

						<!-- 改签后船票信息 -->
						<view v-if="rebookTicketInfo">
							<view class="ticket-detail-item" v-for="(detail, index) in rebookTicketInfo" :key="index">
								<view class="detail-header">
									<view class="detail-header-left">
										<text class="passenger-name">{{ detail.passengerName }}</text>
										<text class="ticket-type">{{ detail.ticketTypeName }}</text>
									</view>
									<text class="ticket-price">¥{{ detail.ticketPrice }}</text>
								</view>
								<view class="detail-header">
									<text class="passenger-no">{{ encryption(detail.passengerCertNo) }}</text>
									<text class="ticket-status" :class="{
								                      'status-locked': detail.ticketStatus === '00',
								                      'status-issued': detail.ticketStatus === '01',
								                      'status-checked': detail.ticketStatus === '02',
								                      'status-changed': detail.ticketStatus === '03',
								                      'status-refunded': detail.ticketStatus === '04'
								                    }">{{ getOrderStatusName(detail.ticketStatus) }}</text>
								</view>

								<view class="route-info">
									<view class="route-section">
										<text class="port-name">{{ detail.startPortName }}</text>
										<text class="time">{{ detail.departTime }}</text>
									</view>
									<view class="route-arrow">
										<text class="ship-name">{{ detail.cabinName }} / 座位号{{ detail.seatNo }}</text>
										<view class="arrow-line"></view>
										<text class="ship-name">{{ detail.shipName }} / 航班号{{ detail.classNo }}</text>
									</view>
									<view class="route-section">
										<text class="port-name">{{ detail.arrivePortName }}</text>
										<text class="time">{{ detail.arriveTime }}</text>
									</view>
								</view>

								<view class="ticket-details">

									<view class="detail-row">
										<text class="label">订单号：</text>
										<text class="value">{{ detail.orderNo }}<text v-if="detail.orderNo"
												@click="copyOrderNo(detail.orderNo)"
												class="copy-icon">{{$t('orderDetail.labels.copy')}}</text></text>
									</view>
									<view class="detail-row" v-if="detail.orderPassword">
										<text class="label">验证码：</text>
										<text class="value">{{ detail.orderPassword }}</text>
									</view>
									<!-- <view class="detail-row">
																	<text class="label">航班号：</text>
																	<text class="value">{{ detail.classNo }}</text>
																</view> -->
									<view class="detail-row">
										<text class="label">航班日期：</text>
										<text class="value">{{ detail.classDate }}</text>
									</view>
								</view>
								<!-- 退票按钮 -->
								<view class="ticket-action" v-if="canRefundTicket(detail)">
									<button class="refund-btn" @click="confirmRebookRefundTicket(detail)">
										退票
									</button>
								</view>
							</view>
						</view>

						<view class="ticket-detail-item" v-for="(detail, index) in getShipTicketInfo().detailList"
							:key="index">
							<view class="detail-header">
								<view class="detail-header-left">
									<text class="passenger-name">{{ detail.passengerName }}</text>
									<text class="ticket-type">{{ detail.ticketTypeName }}</text>
								</view>
								<text class="ticket-price">¥{{ detail.ticketPrice }}</text>
							</view>
							<view class="detail-header">
								<text class="passenger-no">{{ encryption(detail.passengerCertNo) }}</text>
								<text class="ticket-status" :class="{
                      'status-locked': detail.ticketStatus === '00',
                      'status-issued': detail.ticketStatus === '01',
                      'status-checked': detail.ticketStatus === '02',
                      'status-changed': detail.ticketStatus === '03',
                      'status-refunded': detail.ticketStatus === '04'
                    }">{{ getOrderStatusName(detail.ticketStatus) }}</text>
							</view>

							<view class="route-info">
								<view class="route-section">
									<text class="port-name">{{ detail.startPortName }}</text>
									<text class="time">{{ detail.departTime }}</text>
								</view>
								<view class="route-arrow">
									<text class="ship-name">{{ detail.cabinName }} / 座位号{{ detail.seatNo }}</text>
									<view class="arrow-line"></view>
									<text class="ship-name">{{ detail.shipName }} / 航班号{{ detail.classNo }}</text>
								</view>
								<view class="route-section">
									<text class="port-name">{{ detail.arrivePortName }}</text>
									<text class="time">{{ detail.arriveTime }}</text>
								</view>
							</view>

							<view class="ticket-details">

								<view class="detail-row">
									<text class="label">订单号：</text>
									<text class="value">{{ detail.orderNo }}<text v-if="detail.orderNo"
											@click="copyOrderNo(detail.orderNo)"
											class="copy-icon">{{$t('orderDetail.labels.copy')}}</text></text>
								</view>
								<view class="detail-row" v-if="detail.orderPassword">
									<text class="label">验证码：</text>
									<text class="value">{{ detail.orderPassword }}</text>
								</view>
								<!-- <view class="detail-row">
									<text class="label">航班号：</text>
									<text class="value">{{ detail.classNo }}</text>
								</view> -->
								<view class="detail-row">
									<text class="label">航班日期：</text>
									<text class="value">{{ detail.classDate }}</text>
								</view>
							</view>

							<!-- 退票按钮 -->
							<!-- 	<view class="ticket-action" v-if="canRefundTicket(detail)">
								<button class="refund-btn" @click="confirmRefundTicket(detail)">
									退票
								</button>
							</view> -->
							<view class="ticket-btn" v-if="canRefundTicket(detail)">
								<button class="refund-btn" @click="rebook(detail)">
									改签
								</button>
								<button class="refund-btn" @click="confirmRefundTicket(detail)">
									退票
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 商家信息区域 -->
			<view class="section-card" v-if="businessInfo">
				<view class="section-title">
					<text>{{$t('orderDetail.sections.businessInfo')}}</text>
				</view>
				<view class="info-list">
					<view class="info-item" @click="callShop" v-if="businessInfo.Mobile">
						<text class="info-label">{{$t('orderDetail.labels.contactPhone')}}</text>
						<view class="info-value copy-wrapper">
							<text>{{ businessInfo.Mobile }}</text>
							<text class="copy-icon call-icon">{{$t('orderDetail.labels.call')}}</text>
						</view>
					</view>

					<view class="info-item" v-if="businessInfo.ShopName">
						<text class="info-label">{{$t('orderDetail.labels.businessName')}}</text>
						<text class="info-value">{{ businessInfo.ShopName }}</text>
					</view>

					<view class="info-item" v-if="businessInfo.Address">
						<text class="info-label">{{$t('orderDetail.labels.businessAddress')}}</text>
						<text class="info-value">{{ businessInfo.Address }}</text>
					</view>
				</view>
			</view>

			<!-- 用户信息区域 -->
			<view class="section-card" v-if="getPersonInfo()">
				<view class="section-title">
					<text>{{$t('orderDetail.sections.userInfo')}}</text>
				</view>
				<view class="info-list">
					<view class="info-item" v-if="getPersonInfo().Name">
						<text class="info-label">{{$t('orderDetail.labels.name')}}</text>
						<text class="info-value">{{ getPersonInfo().Name }}</text>
					</view>

					<view class="info-item" v-if="getPersonInfo().Mobile">
						<text class="info-label">{{$t('orderDetail.labels.phone')}}</text>
						<text class="info-value">{{ getPersonInfo().Mobile }}</text>
					</view>

					<view class="info-item" v-if="getPersonInfo().IDCard">
						<text class="info-label">{{$t('orderDetail.labels.idCard')}}</text>
						<text class="info-value">{{ getPersonInfo().IDCard }}</text>
					</view>
				</view>
			</view>

			<!-- 物流信息 (如果有) -->
			<view class="section-card" v-if="orderStatus === 1 && statusList && statusList.length > 0">
				<view class="section-title">
					<text>{{$t('orderDetail.sections.logisticsInfo')}}</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">{{$t('orderDetail.labels.logisticsCompany')}}</text>
						<text
							class="info-value">{{ statusList[0].LogisticsName || $t('orderDetail.labels.unknown') }}</text>
					</view>

					<view class="info-item">
						<text class="info-label">{{$t('orderDetail.labels.trackingNumber')}}</text>
						<view class="info-value copy-wrapper">
							<text>{{ statusList[0].LogisticsANO || $t('orderDetail.labels.unknown') }}</text>
							<text v-if="statusList[0].LogisticsANO" @click="copyOrderNo(statusList[0].LogisticsANO)"
								class="copy-icon">{{$t('orderDetail.labels.copy')}}</text>
						</view>
					</view>

					<view class="info-item">
						<text class="info-label">{{$t('orderDetail.labels.remark')}}</text>
						<text class="info-value">{{ statusList[0].Remark || $t('orderDetail.labels.unknown') }}</text>
					</view>
				</view>
			</view>

			<!-- 开票信息 (如果有) -->
			<view class="section-card" v-if="invoiceInfo">
				<view class="section-title">
					<text>开票信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">开票状态</text>
						<view class="info-value">
							<text :class="{
                'status-processing': invoiceStatus === 0,
                'status-success': invoiceStatus === 1,
                'status-failed': invoiceStatus === 2
              }">{{ invoiceStatusText }}</text>
						</view>
					</view>

					<view class="info-item" v-if="invoiceInfo.CompanyName">
						<text class="info-label">公司名称</text>
						<text class="info-value">{{ invoiceInfo.CompanyName }}</text>
					</view>

					<view class="info-item" v-if="invoiceInfo.CompanyTitle">
						<text class="info-label">发票抬头</text>
						<text class="info-value">{{ invoiceInfo.CompanyTitle }}</text>
					</view>

					<view class="info-item" v-if="invoiceInfo.Email">
						<text class="info-label">邮箱地址</text>
						<text class="info-value">{{ invoiceInfo.Email }}</text>
					</view>

					<view class="info-item" v-if="invoiceInfo.ApplyTime">
						<text class="info-label">申请时间</text>
						<text class="info-value">{{ invoiceInfo.ApplyTime }}</text>
					</view>

					<view class="info-item" v-if="invoiceInfo.SendTime">
						<text class="info-label">处理时间</text>
						<text class="info-value">{{ invoiceInfo.SendTime }}</text>
					</view>

					<!-- 发票图片展示 -->
					<view class="info-item" v-if="invoiceInfo.InvoiceImages && invoiceStatus === 1">
						<text class="info-label">发票图片</text>
						<view class="info-value">
							<view class="invoice-images">
								<view class="invoice-image-item" v-for="(image, index) in getInvoiceImages()"
									:key="index" @click="previewImage(image, getInvoiceImages())">
									<image :src="image" mode="aspectFill" class="invoice-image"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 船票发票信息 -->
			<view class="section-card" v-if="sInvoiceInfo &&sInvoiceInfo.length>0">
				<view class="section-title">
					<text>开票信息</text>
				</view>
				<view class="info-list">
					<view v-for="(item,index) in sInvoiceInfo" :key="index">
						<view class="info-item" v-if="item.invoiceNo">
							<text class="info-label fp">发票号</text>
							<view class="info-value copy-wrapper">
								<text class="w70">{{ item.invoiceNo }}</text>
								<text class="copy-icon" @click="copyFPNo(item.invoicePdfUrl)">下载</text>
								<!-- <text class="copy-icon" @click="rebilling(item)">换开</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<hz-safe-area background="#F5F6F7"></hz-safe-area>
			<!-- 操作按钮区域 -->
			<view class="action-section" v-if="showActions">
				<view class="btns">
					<button class="action-btn" v-if="canCancel"
						@click="cancelOrder">{{$t('orderDetail.actions.cancel')}}</button>
					<button class="action-btn goPay" v-if="canPay"
						@click="payOrder">{{$t('orderDetail.actions.pay')}}</button>
					<button class="action-btn goPay" v-if="canEvaluate"
						@click="navToEvaluation">{{$t('orderDetail.actions.evaluate')}}</button>
					<!-- 	<button class="action-btn goPay"
						v-if="sInvoiceInfo &&  sInvoiceInfo.invoiceType">{{ sInvoiceInfo.invoiceType == 1?'已开票' :'已红冲' }}</button> -->
					<button class="action-btn goPay" v-if="showInvoicing" @click="getInvoiceTicketList">申请开票</button>
					<!-- <button class="action-btn goPay" v-if="showInvoicing" @click="applyInvoice">申请开票</button> -->
				</view>
				<hz-safe-area></hz-safe-area>
			</view>

			<!-- 取消订单弹窗 -->
			<cancel-popup ref="refcancel" @ok="handleOk" :isShowOnClick="isShowOnClick"></cancel-popup>

			<uni-popup ref="refundTicket" type="center">
				<view class="tipsBox">
					<view class="title">
						退票确认
					</view>
					<view class="content" v-if="refundConfirmData">
						<view class="item">
							乘客：{{ refundConfirmData.ticket.passengerName }}
						</view>
						<view class="item">
							航班：{{ refundConfirmData.ticket.classNo }}
						</view>
						<view class="item">
							票价：¥{{ parseFloat(refundConfirmData.currentTicketRefund.ticketPrice).toFixed(2) }}
						</view>
						<view class="item">
							手续费：¥{{ parseFloat(refundConfirmData.currentTicketRefund.refundRateAmount).toFixed(2) }}
						</view>
						<view class="item">
							退款金额：¥{{ parseFloat(refundConfirmData.currentTicketRefund.refundAmount).toFixed(2) }}
						</view>
						<view class="item" v-if="refundConfirmData.currentTicketRefund.remarks">
							说明：{{ refundConfirmData.currentTicketRefund.remarks }}
						</view>
						<view class="tipsText">
							退票成功后，退款金额将在1-5个工作日内退回
						</view>
						<view class="item">
							确定要退票吗？
						</view>
					</view>
					<view class="btnList">
						<view class="btn" @click="closeRefundTicket">
							返回修改
						</view>
						<view class="btn define" v-if="refundConfirmData.noRebook"
							@click="refundConfirmData && refundTicket(refundConfirmData.ticket)">
							确定退票
						</view>
						<view class="btn define" v-else
							@click="refundConfirmData && rebookRefundTicket(refundConfirmData.refundData)">
							确定退票
						</view>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="msgPopup" type="center">
				<view class="tipsBox">
					<view class="title">
						开票失败
					</view>
					<view class="content" v-if="msgList">
						<view class="item" v-for="(item,index) in msgList" :key="index">
							{{item}}
						</view>
					</view>
					<view class="closeBtn" @click="closeMsgPopup">
						确定
					</view>
				</view>
			</uni-popup>
		</template>
	</view>
</template>

<style lang="scss" scoped>
	.tipsBox {
		background-color: #fff;
		width: 90vw;
		border-radius: 20rpx;
		text-align: center;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			padding: 40rpx;
			text-align: center;
		}

		.content {
			padding: 0 30rpx 40rpx 30rpx;
			width: 100%;
			box-sizing: border-box;

			.item {
				font-size: 30rpx;
				padding-bottom: 10rpx;
			}

			.tipsText {
				padding: 20rpx 0;
			}
		}

		.btnList {
			display: flex;
			align-items: center;
			width: 100%;
			border-top: 2rpx solid #999;

			.btn {
				width: 50%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;

				&.define {
					border-left: 2rpx solid #999;
					color: #2796ff;
				}
			}
		}

		.closeBtn {
			border-top: 2rpx solid #999;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #2796ff;
		}
	}

	.ticket-btn {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.refund-btn {
			width: 35%;
			font-size: 28rpx;
		}
	}

	.order-detail-container {
		min-height: 100vh;
		background-color: #F5F6F7;
		padding-bottom: 120rpx;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400rpx;

		.loading-spinner {
			width: 80rpx;
			height: 80rpx;
			border: 6rpx solid #f3f3f3;
			border-top: 6rpx solid #498FFF;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}

		text {
			font-size: 28rpx;
			color: #666;
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	}

	/* 状态区域 */
	.status-section {
		position: relative;
		height: 100rpx;
		background: linear-gradient(135deg, #5794ff 0%, #498FFF 100%);
		padding: 22rpx;
		color: #fff;

		.status-wrapper {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;

			.status-icon {
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;
				background-color: rgba(255, 255, 255, 0.2);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.status-text {
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.wave-bg {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 32rpx;
		}
	}

	/* 状态分布 */
	.status-distribution {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 0 0 16rpx 16rpx;
		margin-top: -5rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.distribution-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 30rpx;

			.item-count {
				font-size: 36rpx;
				font-weight: bold;
				color: #498FFF;
			}

			.item-name {
				font-size: 24rpx;
				color: #666;
				margin-top: 5rpx;
			}
		}
	}

	/* 卡片样式 */
	.section-card {
		margin: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.section-title {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}

	/* 商品列表 */
	.product-list {
		padding: 20rpx 30rpx;

		.product-item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f8f8f8;

			&:last-child {
				border-bottom: none;
			}

			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				background-color: #f8f8f8;
				flex-shrink: 0;
			}

			.product-info {
				flex: 1;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.product-name {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
				}

				.product-spec {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
				}

				.product-price-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;

					.product-price {
						font-size: 32rpx;
						color: #498FFF;
						font-weight: bold;
						&.isPackage{
							 text-decoration: line-through;
						}
					}

					.product-count {
						font-size: 26rpx;
						color: #999;
					}
				}

				.ticket-action {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.refund-btn {
						background-color: #FF4D4F;
						color: #fff;
						border: none;
						border-radius: 8rpx;
						padding: 12rpx 24rpx;
						font-size: 26rpx;
						height: auto;
						line-height: normal;

						&:active {
							background-color: #d9363e;
						}
					}
				}
			}
		}
	}

	/* 总价 */
	.total-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f5f5f5;

		text {
			font-size: 28rpx;
			color: #333;
		}

		.price {
			font-size: 36rpx;
			color: #498FFF;
			font-weight: bold;
		}
	}

	/* 信息列表 */
	.info-list {
		padding: 10rpx 30rpx;

		.info-item {
			display: flex;
			padding: 16rpx 0;
			font-size: 28rpx;

			.info-label {
				width: 160rpx;
				color: #999;
				flex-shrink: 0;

				&.fp {
					width: 140rpx;
				}
			}

			.info-value {
				flex: 1;
				color: #333;
				min-width: 0;
				display: flex;
				align-items: center;

				.w70 {
					display: inline-block;
					max-width: 70%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: break-all;
					cursor: pointer;
					vertical-align: middle;
				}
			}

			.copy-wrapper {
				display: flex;
				align-items: center;

				.copy-icon {
					margin-left: 20rpx;
					color: #498FFF;
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border: 1rpx solid #498FFF;
					border-radius: 20rpx;
				}

				.call-icon {
					background-color: #498FFF;
					color: #fff;
					border-color: #498FFF;
				}
			}
		}
	}

	/* 二维码区域 */
	.qrcode-section {
		margin: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		canvas {
			margin: 20rpx 0;
		}

		.qrcode-tip {
			font-size: 26rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	/* 操作按钮区域 */
	.action-section {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 10;

		.btns {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			height: 100rpx;
			gap: 20rpx;
		}

		.action-btn {
			height: 66rpx;
			padding: 20rpx !important;
			display: flex;
			align-items: center;
			margin: 0;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #666;
			background: #F5F6F7;

			&.goPay {
				border: 2rpx solid #498FFF;
				color: #498FFF !important;
			}

			&.disabled {
				border: 2rpx solid #CCCCCC;
				color: #999 !important;
				background: #F5F6F7;
				pointer-events: none;
			}
		}
	}

	/* 船票信息样式 */
	.ship-ticket-info {
		padding: 0 30rpx 20rpx;

		.ticket-basic-info {
			.info-item {
				display: flex;
				padding: 16rpx 0;
				font-size: 28rpx;

				.info-label {
					width: 160rpx;
					color: #999;
				}

				.info-value {
					flex: 1;
					color: #333;

					.info-action-btn {
						border: 2rpx solid #498FFF;
						padding: 4rpx 10rpx;
						display: inline-block;
						color: #498FFF;
						font-size: 24rpx;
						margin-left: 20rpx;
						border-radius: 30rpx;
					}

					&.price {
						font-size: 32rpx;
						color: #498FFF;
						font-weight: bold;
					}
				}

				.copy-wrapper {
					display: flex;
					align-items: center;

					.copy-icon {
						margin-left: 20rpx;
						color: #498FFF;
						font-size: 24rpx;
						padding: 4rpx 12rpx;
						border: 1rpx solid #498FFF;
						border-radius: 20rpx;
					}
				}
			}
		}

		.ticket-detail-list {
			margin-top: 30rpx;

			.detail-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 20rpx;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #f0f0f0;
			}

			.ticket-detail-item {
				background-color: #f8f9fa;
				border-radius: 12rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;

				.detail-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.detail-header-left {
						display: flex;
						align-items: center;
					}

					.ticket-price {
						font-size: 38rpx;
						font-weight: 600;
						color: #1890FF;
					}

					.passenger-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333;
						margin-right: 20rpx;
					}

					.passenger-no {
						font-size: 32rpx;
						color: #333;
					}

					.ticket-type {
						font-size: 24rpx;
						color: #498FFF;
						background-color: rgba(73, 143, 255, 0.1);
						padding: 6rpx 12rpx;
						border-radius: 20rpx;

						&.rebook {
							color: #FF4D4F;
							background-color: rgba(255, 77, 79, 0.1);
						}

						&.status-locked {
							color: #FF8C00;
							background-color: rgba(255, 140, 0, 0.1);
						}

						&.status-issued {
							color: #52C41A;
							background-color: rgba(82, 196, 26, 0.1);
						}

						&.status-checked {
							color: #1890FF;
							background-color: rgba(24, 144, 255, 0.1);
						}

						&.status-changed {
							color: #722ED1;
							background-color: rgba(114, 46, 209, 0.1);
						}

						&.status-refunded {
							color: #FF4D4F;
							background-color: rgba(255, 77, 79, 0.1);
						}
					}

					.ticket-status {
						font-size: 24rpx;
						color: #498FFF;
						background-color: rgba(73, 143, 255, 0.1);
						padding: 6rpx 12rpx;
						border-radius: 10rpx;

						&.status-locked {
							color: #FF8C00;
							background-color: rgba(255, 140, 0, 0.1);
						}

						&.status-issued {
							color: #52C41A;
							background-color: rgba(82, 196, 26, 0.1);
						}

						&.status-checked {
							color: #1890FF;
							background-color: rgba(24, 144, 255, 0.1);
						}

						&.status-changed {
							color: #722ED1;
							background-color: rgba(114, 46, 209, 0.1);
						}

						&.status-refunded {
							color: #FF4D4F;
							background-color: rgba(255, 77, 79, 0.1);
						}
					}
				}

				.route-info {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					padding: 20rpx;
					background-color: #fff;
					border-radius: 8rpx;

					.route-section {
						display: flex;
						flex-direction: column;
						align-items: center;

						.port-name {
							font-size: 28rpx;
							font-weight: 600;
							color: #333;
							margin-bottom: 6rpx;
						}

						.time {
							font-size: 24rpx;
							color: #666;
						}
					}

					.route-arrow {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 0 20rpx;

						.arrow-line {
							width: 100%;
							height: 2rpx;
							background: linear-gradient(to right, #498FFF, #5794ff);
							margin-bottom: 15rpx;
							margin-top: 15rpx;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								right: -6rpx;
								top: -4rpx;
								width: 0;
								height: 0;
								border-left: 8rpx solid #498FFF;
								border-top: 5rpx solid transparent;
								border-bottom: 5rpx solid transparent;
							}
						}

						.ship-name {
							font-size: 22rpx;
							color: #999;
							text-align: center;
						}
					}
				}

				.ticket-details {
					.detail-row {
						display: flex;
						align-items: center;
						padding: 8rpx 0;
						font-size: 26rpx;

						.label {
							color: #666;
							width: 140rpx;
						}

						.value {
							color: #333;
							flex: 1;

							.copy-icon {
								display: inline-block;
								margin-left: 20rpx;
								color: #498FFF;
								font-size: 24rpx;
								padding: 4rpx 12rpx;
								border: 1rpx solid #498FFF;
								border-radius: 20rpx;
							}

							&.price {
								color: #498FFF;
								font-weight: 600;
							}

							&.ticket-status {
								font-size: 24rpx;
								padding: 4rpx 10rpx;
								border-radius: 12rpx;
								font-weight: 500;
								display: inline-block;

								&.status-locked {
									color: #FF8C00;
									background-color: rgba(255, 140, 0, 0.1);
								}

								&.status-issued {
									color: #52C41A;
									background-color: rgba(82, 196, 26, 0.1);
								}

								&.status-checked {
									color: #1890FF;
									background-color: rgba(24, 144, 255, 0.1);
								}

								&.status-changed {
									color: #722ED1;
									background-color: rgba(114, 46, 209, 0.1);
								}

								&.status-refunded {
									color: #FF4D4F;
									background-color: rgba(255, 77, 79, 0.1);
								}
							}
						}
					}
				}
			}
		}
	}

	/* 开票信息样式 */
	.status-processing {
		color: #FF8C00 !important;
	}

	.status-success {
		color: #52C41A !important;
	}

	.status-failed {
		color: #FF4D4F !important;
	}

	.invoice-images {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-top: 16rpx;

		.invoice-image-item {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			overflow: hidden;
			border: 1rpx solid #e8e8e8;

			.invoice-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 公共类 */
	.text-ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>